<template>
  <div class="mapbox clear">
    <div class="left-con fl tx-c">
      <div class="card" style="background:#26ca91;">
        <p class="fz30 mt20 mb10">
          {{chart.solve}}
          <em>次</em>
        </p>
        <p>今日已处理</p>
      </div>
      <div class="card" style="background:#fd7262;">
        <p class="fz30 mt20 mb10">
          {{chart.alarm - chart.solve > 0 ? chart.alarm - chart.solve : 0 }}
          <em>次</em>
        </p>
        <p>今日未处理</p>
      </div>
      <div v-loading="pieLoading">
        <div class="pie mt20 bgff" id="pie"></div>
      </div>
      <div class="pie mt20 bgff" id="line" v-loading="lineLoading"></div>
    </div>
    <div class="right-con fr bgff">
      <div class="pie pt20 bgff" style="height: 120px;">
        <div>区域报警地图</div>
        <div style="margin: 30px 0">
          <span style>
            设备总数：
            <span style="color: blue">{{chart.total_number}}</span>
          </span>
          <span style="margin-left: 40px;">
            报警总数：
            <span style="color: red">{{chart.alarm_number}}</span>
          </span>
          <span style="margin-left: 40px;">
            用户总数：
            <span style="color: red">{{chart.total_member}}</span>
          </span>
          <span style="margin-left: 40px;">
            更新时间：
            <span>{{new Date().format('yyyy-MM-dd hh:mm:ss')}}</span>
          </span>
        </div>
      </div>
      <baidu-map
        v-loading="mapLoading"
        class="map"
        :center="center"
        @ready="handler"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        mapType="BMAP_NORMAL_MAP"
      >
        <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->
        <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
        <div v-for="(it,index) in eqmtList" :key="it.id">
          <bm-marker
            :position="{lng: it.lng, lat: it.lat}"
            @click="infoWindowOpen(it,index)"
            :icon="{url: `http://img3.zugiot.cn/icon_${it.status}.jpg`, size: {width: 32, height: 32}}"
          >
            <bm-info-window
              :show="it.id==cur_id"
              @close="infoWindowClose(it,index)"
              @open="infoWindowOpen(it,index)"
              :title="it.name"
            >
              <div style="margin-top:10px;">
                状态：
                <em v-if="it.status==0">离线</em>
                <em v-else-if="it.status==1" style="color:#26ca91">正常</em>
                <em v-else-if="it.status==2" style="color:#fd7262">报警</em>
              </div>
            </bm-info-window>
          </bm-marker>
          <!-- <bm-label :content="it.title" :position="{lng: it.lng, lat: it.lat}" :labelStyle="{border:'1px solid #13227a',color: '#13227a', fontSize : '12px'}" :title="it.title"/> -->
        </div>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import { _chartReportIndex, _eqmtLatLng } from "@/http/ajax";
export default {
  name: "mapstyle",
  data() {
    return {
      chart: { alarm: 0, solve: 0 },
      pieLoading: true,
      lineLoading: true,
      mapLoading: true,

      baidumap: false,
      cur_id: 0,
      center: { lng: 0, lat: 0 }, //经纬度
      zoom: 10, //地图展示级别
      points: [],
      eqmtList: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let user = JSON.parse(sessionStorage.user);
      _chartReportIndex(
        {
          type: sessionStorage.level == "3" ? 3 : "",
          level: sessionStorage.level,
          provinceId: user.provinceId || 0,
          cityId: user.cityId || 0,
          districtId: user.districtId || 0
        },
        res => {
          this.chart = res;
          this.drawPie(res);
          this.drawLine(res);
          setTimeout(() => {
            this.pieLoading = false;
            this.lineLoading = false;
          }, 200);
        },
        err => {}
      );
    },
    getEqmtLatLng() {
      let data = {
        level: sessionStorage.level
      };
      let user = JSON.parse(sessionStorage.user);
      _eqmtLatLng(
        data,
        res => {
          if (res.data.length) {
            this.eqmtList = res.data;
            this.cur_id = this.eqmtList[0].id;
            this.center = {
              lng: this.eqmtList[0].lng,
              lat: this.eqmtList[0].lat
            };
            this.eqmtList.forEach(el => {
              el["showFlag"] = false;
            });
            this.zoom = data.level == 1 ? 5 : 10;
          } else {
            this.zoom = data.level == 1 ? 5 : 10;
            this.center =
              data.level == 1
                ? "中国武汉市"
                : (user.province ? user.province.name : "") +
                  (user.city ? user.city.name : "") +
                  (user.district ? user.district.name : "");
          }
          this.mapLoading = false;
        },
        err => {}
      );
    },
    handler({ BMap, map }) {
      this.getEqmtLatLng();
    },
    infoWindowClose(it, index) {
      this.cur_id = 0;
      it.showFlag = false;
    },
    infoWindowOpen(it, index) {
      this.cur_id = it.id;
      it.showFlag = true;
    },
    drawPie(res) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("pie"));
      let online =
        res.total_number - res.offline_number - res.alarm_number || 0;
      let legendData = [
        "正常 " + online || 0,
        "报警 " + res.alarm_number || 0,
        "离线 " + res.offline_number || 0
      ];
      let option = {
        title: {
          text: "设备状态统计",
          subtext: "",
          top: "2%",
          left: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          top: "2%",
          right: "3%",
          // bottom: 10,
          // left: "center",
          data: legendData
        },
        series: [
          {
            type: "pie",
            name: "设备状态统计",
            radius: "65%",
            center: ["45%", "60%"],
            selectedMode: "single",
            data: [
              {
                value: res.total_number - res.offline_number - res.alarm_number,
                name: legendData[0]
              },
              { value: res.alarm_number, name: legendData[1] },
              { value: res.offline_number, name: legendData[2] }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = ["#26ca91", "#fd7262", "#c8c9cc"];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option);
    },
    drawLine(res) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("line"));
      // 绘制图表
      myChart.setOption({
        title: { top: "2%", text: "报警统计" },
        tooltip: {},
        xAxis: {
          data: ["漏电", "过载", "温度异常", "电压异常"]
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "2%",
          containLabel: true
        },
        yAxis: {},
        series: [
          {
            name: "报警统计",
            type: "bar",
            data: [res.loudian, res.guozai, res.wenduyc, res.dianyayc],
            itemStyle: {
              //上方显示数值
              normal: {
                color: "#587ef4",
                label: {
                  show: true, //开启显示
                  position: "top" //在上方显示
                }
              }
            }
          }
        ]
      });
    },
    clickHandler(e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
    },
    addPoints() {
      const points = [];
      for (var i = 0; i < 1000; i++) {
        const position = {
          lng: Math.random() * 40 + 85,
          lat: Math.random() * 30 + 21
        };
        points.push(position);
      }
      this.points = points;
    }
  }
};
</script>

<style lang="scss">
.mapbox {
  height: 100%;
  .left-con {
    width: 380px;
    box-sizing: border-box;
    height: 100%;
    // height: 400px;
    .card {
      width: 48%;
      height: 120px;
      background: red;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
    }
    .pie {
    }
    #pie {
      height: 300px;
    }
    #line {
      height: calc(100% - 460px);
    }
  }
  .right-con {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    width: calc(100% - 400px);
    .map {
      height: calc(100% - 140px);
    }
  }
  .anchorBL {
    display: none;
  }
}
</style>
